<template>
    <sc-dialog title="发送通知" v-model="propValue" destroy-on-close custom-class="sendNotice" width="60vw" @close="_close" @open="_open">
        <div class="dialog-content" style="padding: 30px">
            <el-form ref="form" label-width="80px">
                <el-form-item label="发布对象">
                    <el-radio-group v-model="form.type">
                        <el-radio label="2">班级</el-radio>
                        <el-radio label="1">学生</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>

            <el-form ref="form" :inline="true" :model="form" label-width="80px">
                <el-form-item label="班级" v-show="form.type == 2">
                    <el-card class="box-card">
                        <el-input placeholder="输入关键字进行过滤" v-model="filterText" style="width: 400px"></el-input>
                        <div v-loading="loading" style="margin-top: 10px">
                            <div class="tree-box">
                                <el-tree
                                    default-expand-all
                                    class="filter-tree"
                                    style="max-height: 300px;overflow-y: auto"
                                    @node-click="gradeNodeClick"
                                    :data="gradeTreeData"
                                    :props="gradeDefaultProps"
                                    :expand-on-click-node="false"
                                    :filter-node-method="gradeFilterNode"
                                    show-checkbox
                                    ref="gradeTree"
                                    node-key="id"
                                ></el-tree>
                            </div>
                        </div>
                    </el-card>
                </el-form-item>

                <el-form-item label="学生" v-show="form.type == 1">
                    <el-card class="box-card">
                        <div style="margin-bottom:5px;width: 400px;" v-if="students.length">
                            <el-tag v-for="tag in students" :key="tag.id" closable @close="handleClose(tag)">
                                {{ tag.nick }} ({{tag.levelNick}})
                            </el-tag>
                        </div>
                        <el-input placeholder="输入学生姓名进行搜索" v-model="filterStudentName" style="width: 400px"></el-input>
                        <div v-loading="loading" style="margin-top: 10px">
                            <div class="tree-box">
                                <el-tree
                                    class="filter-tree"
                                    style="min-height: 300px"
                                    :data="studentTreeData"
                                    :props="studentDefaultProps"
                                    :expand-on-click-node="false"
                                    :filter-node-method="studentFilterNode"
                                    @node-click="studentNodeClick"
                                    @check-change="checkChange"
                                    show-checkbox
                                    ref="studentTree"
                                    node-key="id"
                                >
                                    <span class="custom-tree-node" slot-scope="{ node, data }">

                                       {{ data.nick }} ({{data.levelNick}})
                                    </span>
                                </el-tree>
                            </div>
                        </div>
                    </el-card>
                </el-form-item>

                <el-form-item label="通知内容" required>
                    <el-input type="textarea" v-model="form.content" rows="20" style="width: 400px; min-height: 300px"></el-input>
                </el-form-item>
            </el-form>
        </div>

        <span slot="footer" class="dialog-footer">
            <el-button icon="el-icon-setting" size="medium" type="primary" @click="onSubmit">发 送</el-button>
            <el-button size="medium" @click="_close">取 消</el-button>
        </span>
    </sc-dialog>
</template>
<script>
export default {
    name: 'sendNotice',
    components: {},
    props: {
        value: {
            type: Boolean,
            default: false,
        },
        schoolId:{
            type: Number,
            default: '',
        },
        currentData: {
            type: Object,
            default() {
                return {}
            },
        },
        studentData: {
            type: Array,
            default() {
                return []
            },
        },
    },
    data() {
        return {
            defaults: {},
            gradeTreeData: [],
            studentTreeData: [],
            form: {
                type: '2',
                content:''
            },
            loading: true,
            filterText: '',
            filterStudentName: '',
            gradeDefaultProps: {
                children: 'children',
                label: 'label',
            },
            studentDefaultProps: {
                label: 'label',
            },
            students: [],
        }
    },
    computed: {
        propValue: {
            get() {
                return this.value
            },
            set(nval) {
                this.$emit('input', nval)
            },
        },
    },
    watch: {
        filterText(val) {
            this.$refs.gradeTree.filter(val)
        },
        schoolId(val) {
            console.log("val",val)
        },
        filterStudentName(val) {
            if (val.length >= 2) {
                this.getStudentName(val)
            }

            if(!val){
                this.studentTreeData = []
                this.filterStudentName = ''
            }
        },
        studentData(val){
            if(val.length){
                this.form.type = '1'
                this.students = val;
            }
        }
    },
    created() {

    },
    methods: {
        // 获取班级树
        async getClassTreeList() {
            let { code, data } = await this.$api.schoolConfig.schoolList.getClassTreeList({schoolId:this.schoolId})
            if (code === 200) {
                this.gradeTreeData = data
                this.loading = false
            }
            return
        },

        // 搜索学生
        async getStudentName(name) {
            let { code, data } = await this.$api.schoolConfig.schoolList.getStudentName({ name, schoolId:this.schoolId })
            if (code === 200) {
                this.studentTreeData = data.map((v) => {
                    v.label = v.nick
                    return v
                })
            }
            return
        },

        gradeNodeClick(data) {
            console.log('🚀 ~ file: selectClassTree.vue ~ line 93 ~ gradeNodeClick ~ data', data)
        },

        gradeFilterNode(value, data) {
            if (!value) return true
            return data.label.indexOf(value) !== -1
        },

        studentNodeClick(data) {
            console.log('🚀 ~ file: selectClassTree.vue ~ line 93 ~ gradeNodeClick ~ data', data)
        },

        // 勾选事件
        checkChange(node, checked) {
            if (checked) {
                if (!this.students.filter((v) => v.id == node.id).length) {
                    this.students.push(node)
                    this.studentTreeData = []
                    this.filterStudentName = ''
                }
            }
        },

        studentFilterNode(value, data) {
            if (!value) return true
            return data.label.indexOf(value) !== -1
        },

        // 提交
        async onSubmit() {
            // console.log('选中的包含父级keys', this.$refs.menu.getCheckedKeys())
            // console.log('选中的不包含父级keys', this.$refs.menu.getCheckedKeys(true))
            // console.log('全部选中包含半选', this.$refs.menu.getCheckedKeys().concat(this.$refs.menu.getHalfCheckedKeys()))
            // console.log('getCheckedNodes', this.$refs.gradeTree.getCheckedKeys(true))
            let ids = JSON.parse(JSON.stringify(this.students)).map(v => (v.id))
            let params = {
                sendIds: this.form.type == '2'?this.$refs.gradeTree.getCheckedKeys(true):ids,
                type:+this.form.type,
                content:this.form.content,
                schoolId:this.schoolId
            }

            let { code, msg } = await this.$api.schoolConfig.schoolList.sendParentMessage(params)
            if (code === 200) {
                this.$message.success('发送成功' || msg)
                this.$emit('input', false)
            }
        },
        // 删除tag
        handleClose(tag) {
            this.students.splice(this.students.indexOf(tag), 1)
        },

        _open(){
            this.getClassTreeList()
        },
        //关闭弹窗
        _close() {
            this.gradeTreeData = []
            this.studentTreeData = []
            this.students = []
            this.filterStudentName = ''
            this.form.content = '';
            this.form.type = '2'
            this.$emit('input', false)
        },
    },
}
</script>

<style scoped>
.el-tag + .el-tag {
    margin-left: 10px;
}
</style>
<style lang="scss" scoped>
.getFaceFromPopup {
    .dialog-content {
        .get-face {
            height: 200px;
            width: 200px;
            background-color: rgba(249, 249, 249, 1);
            box-sizing: border-box;
            border-width: 1px;
            border-style: solid;
            border-color: rgba(233, 233, 233, 1);
            border-right: 8px;
            color: $t-color-2;
            cursor: pointer;
            .saasIcon {
                margin-top: 20px;
                color: $t-color-2;
                font-size: 80px;
            }
            span {
                font-size: 20px;
                font-width: bold;
                margin-top: 30px;
            }
        }
        .face-img {
            position: relative;
            width: 200px;
            img {
                width: 200px;
            }
            .saasIcon {
                cursor: pointer;
                position: absolute;
                right: -13px;
                top: -18px;
                font-size: 40px;
                font-weight: bold;
                color: #dc5858;
            }
        }
    }
}
</style>
